<template>
	<view>
		<view class="item">
			<image :src="data[activ]" mode=""></image>
		</view>
		
	</view>
</template>
<script>
	export default{
		data(){
			return{
				data:[
					"http://img13.360buyimg.com/n7/jfs/t1/192793/9/15836/118010/61050e92Ef83d9f9c/bb84aa8907852cd5.jpg",
					"http://img14.360buyimg.com/n7/jfs/t1/93488/1/23523/226772/622e1b9eEda2d5557/f5fb7827fb4023a5.jpg",
					"http://img14.360buyimg.com/n7/jfs/t1/117699/15/21194/182907/622eb3f8E239e117e/89bc48cd16365618.jpg"
				],
				activ:0
				
			}
			
		},
		methods:{
			change(){
				console.log(this.data.length)
				console.log(this.activ)
				if(this.activ<this.data.length-1){
					this.activ++
				}else{
					this.activ=0
				}
			}
		},
		mounted(){
			const timer = setInterval(()=>{	
				this.change()
			}, 2000) // 每两秒执行1次
			this.$once('hook:beforeDestroy',()=>{
				// 在页面销毁时，销毁定时器
				clearInterval(timer)
			})
		}

	}
</script>
<style>
	.item{
		position: fixed;
		width: 100%;
		height: 200rpx;
		overflow: hidden;
		background-color: #007AFF
	}
	.item>image{
		width: 100%;
		
	}
	

</style>